@if (content) {
  <article class="question relative p-y-sm">
    <div class="container">
      <div class="top m-bottom-sm">
        <app-chip-list [classes]="'mini'" [content]="content.topic" />
      </div>
      <h2 class="title">{{ content.title }}</h2>
      <div class="question-details" [innerHTML]="content.body | safeHtml"></div>
      <div class="actions m-y-sm">
        @if (!(user$ | async)) {
          <button mat-raised-button color="primary" (click)="openLogin()">
            <mat-icon>person</mat-icon> 登录作答
          </button>
        }
        @if (!isAsked && (user$ | async)) {
          <button mat-raised-button color="primary" (click)="onShowEditor()">
            <mat-icon>editor</mat-icon> 回答
          </button>
        }
        @if (isAsked) {
          <button mat-raised-button color="warn" (click)="checkQuestion(myCommentId)">
            <mat-icon>list</mat-icon> 查看回答
          </button>
        }
      </div>
    </div>
  </article>
}
<article class="comment relative p-y-sm">
  <div class="container">
    <!-- input params and editor config -->
    @if (showEditor) {
      <app-comment-form [type]="'add'" [content]="content" />
    }
    <app-comment-list [comments]="comments" [content]="content" />
  </div>
</article>
